<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组合模式之复习虚拟节点</title>
</head>
<body>
    <div id="root"></div>
<script>
    // 虚拟节点类
    class ReactElement {
        constructor(type, props) {
            this.type = type;
            this.props = props;
        }
    };
    // 创建虚拟节点 的函数
    function createElement(type, props={}, ...children) { 
        return new ReactElement(type, {...props, children: children.length == 1?children[0] : children})
     }
    // 创建虚拟节点
    let rootElement = createElement('span', null, 'hello', createElement('span', null, 'word', createElement('p', null, 'word33')));
    // 渲染函数
    function render(element, container) {
        // 如果element是一个文本，直接插入
        if (typeof element == 'string') return container.appendChild(document.createTextNode(element));
        // 如果不是文本
        let {type, props} = element;
        // 创建一个真实的节点
        let realDom = document.createElement(type);
        // 遍历虚拟节点对象的props
        for (let attr in props) {
            if (attr === 'className') {
                realDom.setAttrbute('class', props[attr]);
            }
            else if (attr == 'children') {
                // 如果childreny有值且不为文本
                if (typeof props[attr] == 'object') {
                    // 遍历
                    props[attr].forEach(item => {
                        if (typeof item === 'object') {
                            // 递归
                            render(item, realDom);
                        }
                        else {
                            realDom.appendChild(document.createTextNode(item));
                        }
                    });
                }
                else {// 如果childreny有值且为文本
                    realDom.appendChild(document.createTextNode(props[attr]));
                }
            }
            else {
                realDom.setAttrbute(attr, props[attr]);
            }
        }
        // 节点上树
        container.appendChild(realDom);

    };
    // 将虚拟节点渲染上树
    render(rootElement, document.querySelector('#root'));
</script>
    
</body>
</html>